<script>
init({
  title: 'Issue #283',
  desc: 'Use resetView to reset the header width(<a href="https://github.com/wenzhixin/bootstrap-table/issues/283" target="_blank">#283</a>).',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<script>
  const $table = $('#table')

  function buildTable ($el, cells, rows) {
    let i
    let j
    let row
    const columns = []
    const data = []

    for (i = 0; i < cells; i++) {
      columns.push({
        field: `field${i}`,
        title: `Cell${i}`
      })
    }
    for (i = 0; i < rows; i++) {
      row = {}
      for (j = 0; j < cells; j++) {
        row[`field${j}`] = `Row-${i}-${j}`
      }
      data.push(row)
    }
    $el.bootstrapTable('destroy').bootstrapTable({
      columns,
      data
    })
  }

  function mounted () {
    buildTable($('#table'), 10, 50)

    const $d = $('#d')
    let width = $d.width()

    $('#b').click(function () {
      width += 100
      $d.css('width', `${width}px`)
      $table.bootstrapTable('resetView')
    })
    $('#s').click(function () {
      width -= 100
      $d.css('width', `${width}px`)
      $table.bootstrapTable('resetView')
    })
  }
</script>

<template>
  <p>
    <button
      id="b"
      type="button"
      class="btn btn-secondary"
    >
      Larger
    </button>
    <button
      id="s"
      type="button"
      class="btn btn-secondary"
    >
      Smaller
    </button>
  </p>
  <div
    id="d"
    class="div-table"
  >
    <div class="cell-left">
      <table
        id="table"
        data-height="500"
      ></table>
    </div>
    <div class="cell-right">
      RRR
    </div>
  </div>

  <div class="clearfix"></div>
</template>

<style>
  .div-table {
    /*display: table;*/
    border: 1px solid #ccc;
  }
  .cell-left {
    /*display: table-cell;*/
    float: left;
    width:80%;
  }
  .cell-right {
    /*display: table-cell;*/
    float: right;
    width:20%;
  }
</style>
